<template>
  <div class="app-container">
    <el-card>
      <el-row :gutter="20">
        <el-col :span="5">
          <el-input v-model="searchQuery" placeholder="搜索药剂名称/采购单号" clearable @clear="handleClearSearch" />
        </el-col>
        <el-col :span="4">
          <el-select v-model="drugType" placeholder="药剂类型">
            <el-option label="全部" value=""></el-option>
            <el-option label="絮凝剂" value="絮凝剂"></el-option>
            <el-option label="消毒剂" value="消毒剂"></el-option>
            <el-option label="pH调节剂" value="pH调节剂"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="purchaseStatus" placeholder="采购状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="待处理" value="待处理"></el-option>
            <el-option label="已处理" value="已处理"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-date-picker v-model="dateRange" type="daterange" style="width: 100%;" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" @change="handleDateChange"></el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="handleAddPurchase" icon="Plus">新增采购</el-button>
          <el-button type="primary" @click="handleAddPurchase" icon="Download">导出数据</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="mt-2">
      <el-table :data="purchaseList" border style="width: 100%">
        <el-table-column prop="orderNo" label="采购单号" align="center"></el-table-column>
        <el-table-column prop="drugName" label="药剂名称" align="center"></el-table-column>
        <el-table-column prop="drugType" label="药剂类型" align="center"></el-table-column>
        <el-table-column prop="quantity" label="采购数量(kg)" align="center"></el-table-column>
        <el-table-column prop="unitPrice" label="采购单价(元)" align="center"></el-table-column>
        <el-table-column prop="totalAmount" label="采购总额(元)" align="center"></el-table-column>
        <el-table-column prop="supplier" label="供应商" align="center"></el-table-column>
        <el-table-column prop="time" label="采购时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="orderDateil(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="mt-2" background layout="prev, pager, next" :total="totalRecords"
        :current-page.sync="currentPage" @current-change="handlePageChange"></el-pagination>
    </el-card>


    <!-- 新增药剂采购 -->
    <el-dialog title="新增药剂采购" v-model="purchaseVisible" width="600px">
      <el-form ref="purchaseForm" :model="form" :rules="rules" label-width="120px" label-position="right">
        <!-- 药剂名称 -->
        <el-form-item label="药剂名称" prop="medicineName" required>
          <el-select v-model="form.medicineName" placeholder="请选择药剂" filterable style="width: 100%">
            <el-option v-for="item in medicineOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <!-- 药剂类型 -->
        <el-form-item label="药剂类型" prop="medicineType" required>
          <el-select v-model="form.medicineType" placeholder="请选择类型" style="width: 100%">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <!-- 采购数量 -->
        <el-form-item label="采购数量(kg)" prop="quantity" required>
          <el-input-number v-model="form.quantity" :min="0.1" :step="0.1" :precision="1" controls-position="right"
            style="width: 100%" />
        </el-form-item>

        <!-- 采购单价 -->
        <el-form-item label="采购单价(元)" prop="unitPrice" required>
          <el-input-number v-model="form.unitPrice" :min="0.1" :step="0.1" :precision="2" controls-position="right"
            style="width: 100%" />
        </el-form-item>

        <!-- 供应商 -->
        <el-form-item label="供应商" prop="supplier" required>
          <el-select v-model="form.supplier" placeholder="请选择供应商" filterable style="width: 100%">
            <el-option v-for="item in supplierOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <!-- 采购说明 -->
        <el-form-item label="采购说明">
          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入采购说明或备注" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="purchaseVisible = false">取消</el-button>
          <el-button type="primary" @click="addSubmitForm">确认采购</el-button>
        </span>
      </template>
    </el-dialog>
    <!--  采购单详情 -->
    <el-dialog title="采购单详情 - CG20230601001" v-model="orderDetailsVisible" width="800px" top="5vh">
      <!-- 采购基本信息 -->
      <el-descriptions title="采购基本信息" :column="2" border>
        <el-descriptions-item label="采购单号" width="150px">
          <el-tag type="info">CG20230601001</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          2023-06-01 09:30:15
        </el-descriptions-item>
        <el-descriptions-item label="药品名称">
          <span class="highlight-text">聚合氯化铝(PAC)</span>
        </el-descriptions-item>
        <el-descriptions-item label="药品类型">
          <el-tag>混凝剂</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="规格型号">PAC-30</el-descriptions-item>
        <el-descriptions-item label="计量单位">kg</el-descriptions-item>
        <el-descriptions-item label="采购数量">500</el-descriptions-item>
        <el-descriptions-item label="采购单价">
          <span class="price-text">3.80 元</span>
        </el-descriptions-item>
        <el-descriptions-item label="采购总额">
          <span class="price-text total">1900.00 元</span>
        </el-descriptions-item>
        <el-descriptions-item label="采购状态">
          <el-tag type="success">已完成</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="采购说明" :span="2">
          2023年第二季度常规采购
        </el-descriptions-item>
      </el-descriptions>

      <!-- 供应商信息 -->
      <el-descriptions class="mt-2" title="供应商信息" :column="2" border>
        <el-descriptions-item label="供应商名称">
          北京水处理科技有限公司
        </el-descriptions-item>
        <el-descriptions-item label="联系人">张经理</el-descriptions-item>
        <el-descriptions-item label="联系电话">
          <el-link type="primary" :underline="false">
            13800138000
          </el-link>
        </el-descriptions-item>
        <el-descriptions-item label="电子邮箱">
          contact@watertech.com
        </el-descriptions-item>
      </el-descriptions>
      <!-- 入库记录 -->
      <el-descriptions class="mt-2" :column="2" border title="入库记录">
        <el-descriptions-item label="操作状态">
          <el-tag type="success">药剂入库完成</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="操作人">
          李名辉管理员
        </el-descriptions-item>
        <el-descriptions-item label="入库时间">
          2023-06-18 09:15:33
        </el-descriptions-item>
        <el-descriptions-item label="入库数量">500 kg</el-descriptions-item>
        <el-descriptions-item label="存放位置" :span="2">
          <el-tag type="warning">B区3号货架</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <!--审核记录  -->
      <div style="margin-left: -30px;margin-top: 30px;">
        <el-timeline title="审核记录">
          <el-timeline-item v-for="(record, index) in auditRecords" :key="index" :type="record.type"
            :color="record.color" :timestamp="record.time" placement="top">
            <h4>{{ record.action }}</h4>
            <p>{{ record.operator }}</p>
            <div v-if="record.comment" class="comment">
              <el-text type="info">审核意见:</el-text> {{ record.comment }}
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="orderDetailsVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑 -->
    <el-dialog title="编辑药剂采购" v-model="updateFormVisible" width="600px" >
      <el-form ref="updatePurchaseForm" :model="updateForm" :rules="updateFormRule" label-width="120px"
        label-position="right">
        <!-- 药剂名称 -->
        <el-form-item label="药剂名称" prop="medicineName" class="form-item-with-status">
          <el-input v-model="updateForm.medicineName" placeholder="输入药剂名称" clearable />
        </el-form-item>

        <!-- 药剂类型 -->
        <el-form-item label="药剂类型" prop="medicineType" class="form-item-with-status">
          <el-select v-model="updateForm.medicineType" placeholder="选择药剂类型" style="width: 100%">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <!-- 采购数量 -->
        <el-form-item label="采购数量(kg)" prop="quantity" class="form-item-with-status">
          <el-input-number v-model="updateForm.quantity" :min="1" :step="1" :precision="0" controls-position="right"
            style="width: 100%" />
        </el-form-item>

        <!-- 采购单价 -->
        <el-form-item label="采购单价(元)" prop="unitPrice" class="form-item-with-status">
          <el-input-number v-model="updateForm.unitPrice" :min="0.1" :step="0.1" :precision="2"
            controls-position="right" style="width: 100%" />
        </el-form-item>

        <!-- 供应商 -->
        <el-form-item label="供应商" prop="supplier" class="form-item-with-status">
          <el-select v-model="updateForm.supplier" placeholder="选择供应商" filterable style="width: 100%">
            <el-option v-for="item in supplierOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <!-- 采购说明 -->
        <el-form-item label="采购说明">
          <el-input v-model="updateForm.remark" type="textarea" :rows="3" placeholder="输入采购说明" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="updateFormVisible = false">取消</el-button>
          <el-button type="primary" @click="updateSubmitForm">保存修改</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

const searchQuery = ref('');
const drugType = ref('');
const purchaseStatus = ref('');
const dateRange = ref([]);
const currentPage = ref(1);
const totalRecords = ref(10);

const purchaseList = reactive([
  {
    orderNo: 'CG20230601001',
    drugName: '聚合氯化铝(PAC)',
    drugType: '絮凝剂',
    quantity: 500,
    unitPrice: 3.80,
    totalAmount: 1900.00,
    supplier: '北京水处理科技有限公司'
  },
  // Add more items as needed
]);
const purchaseVisible = ref(false);
const purchaseForm = ref();

// 表单数据
const form = reactive({
  medicineName: '',
  medicineType: '',
  quantity: 1,
  unitPrice: 0.1,
  supplier: '',
  remark: ''
})

// 下拉选项数据
const medicineOptions = [
  { value: 'pac', label: '聚合氯化铝(PAC)' },
  { value: 'pam', label: '聚丙烯酰胺(PAM)' },
  { value: 'naclo', label: '次氯酸钠' },
  { value: 'naoh', label: '氢氧化钠' }
]

const typeOptions = [
  { value: 'liquid', label: '液态' },
  { value: 'solid', label: '固态' },
  { value: 'powder', label: '粉末' }
]

const supplierOptions = [
  { value: 'supplier1', label: '北京蓝星化工有限公司' },
  { value: 'supplier2', label: '上海石化股份有限公司' },
  { value: 'supplier3', label: '南京化学工业有限公司' }
]

// 表单验证规则
const rules = reactive({
  medicineName: [
    { required: true, message: '请选择药剂名称', trigger: 'change' }
  ],
  medicineType: [
    { required: true, message: '请选择药剂类型', trigger: 'change' }
  ],
  quantity: [
    { required: true, message: '请输入采购数量', trigger: 'blur' },
    { type: 'number', min: 0.1, message: '数量必须大于0', trigger: 'blur' }
  ],
  unitPrice: [
    { required: true, message: '请输入采购单价', trigger: 'blur' },
    { type: 'number', min: 0.1, message: '单价必须大于0', trigger: 'blur' }
  ],
  supplier: [
    { required: true, message: '请选择供应商', trigger: 'change' }
  ]
})



const orderDetailsVisible = ref(false);

// 审核记录数据
const auditRecords = ref([
  {
    action: '采购申请提交',
    operator: '提交人: 张工程师',
    time: '2023-06-01 09:30:15',
    comment: '',
    color: '#0bbd87',
  },
  {
    action: '采购审核通过',
    operator: '审核人: 王主管',
    time: '2023-06-15 14:30:22',
    comment: '采购数量和价格合理，同意采购',
    type: 'primary',
  }
])


// 提交表单
const addSubmitForm = async () => {
  purchaseForm.value.validate(valid => {
    if (valid) {
      // 提交表单逻辑
      console.log('Form is valid:', form);
      purchaseVisible.value = false;
    } else {
      console.log('Form is invalid');
    }
  })
}


const updateFormVisible = ref(false)
const updatePurchaseForm = ref()

// 表单数据（带初始值）
const updateForm = reactive({
  medicineName: '',
  medicineType: '',
  quantity: 1,
  unitPrice: 31,
  supplier: '',
  remark: ''
})



// 表单验证规则
const updateFormRule = reactive({
  medicineName: [
    { required: true, message: '请输入药剂名称', trigger: 'blur' }
  ],
  medicineType: [
    { required: true, message: '请选择药剂类型', trigger: 'change' }
  ],
  quantity: [
    { required: true, message: '请输入采购数量', trigger: 'blur' },
    { type: 'number', min: 1, message: '数量必须大于0', trigger: 'blur' }
  ],
  unitPrice: [
    { required: true, message: '请输入采购单价', trigger: 'blur' },
    { type: 'number', min: 0.1, message: '单价必须大于0', trigger: 'blur' }
  ],
  supplier: [
    { required: true, message: '请选择供应商', trigger: 'change' }
  ]
})

// 提交表单
const updateSubmitForm = async () => {

  updatePurchaseForm.value.validate(valid => {
    if (valid) {
      // 提交表单逻辑
      console.log('Form is valid:', updateForm);
      updateFormVisible.value = false;
    } else {
      console.log('Form is invalid');
    }
  })

}
const orderDateil = () => {
  orderDetailsVisible.value = true;
}
const handleClearSearch = () => {
  searchQuery.value = '';
};

const handleDateChange = (dates) => {
  dateRange.value = dates;
};

const handleAddPurchase = () => {
  // Handle add purchase logic
  purchaseVisible.value = true;
};

const handleEdit = (row) => {
  // Handle edit logic
  console.log('Editing row:', row);
  updateFormVisible.value = true;
};

const handleDelete = (row) => {
  // Handle delete logic
  console.log('Deleting row:', row);
};

const handlePageChange = (page) => {
  currentPage.value = page;
};
</script>

<style scoped>
.drug-purchase-management {
  padding: 20px;
}
</style>